<template>
  <!-- 首页 -->
  <div
    class="index"
    v-if="!$isMobile"
  >
    <div class="module wp-100">
      <div class="g-con g-grid">
        <div class="left flexsc-col">
          <div class="a">
            <Banner
              bannerModel="0"
              isIndex
              height="360px"
            />
          </div>
          <div class="mt-2 flexsb wp-100">
            <div class="b">
              <a
                v-if="bannerData[3]"
                :href="setBannerHref(bannerData[3].href)"
              >
                <img
                  :src="bannerData[3].url"
                  alt=""
                />
              </a>
            </div>
            <div class="c">
              <a
                v-if="bannerData[4]"
                :href="setBannerHref(bannerData[4].href)"
              >
                <img
                  :src="bannerData[4].url"
                  alt=""
                />
              </a>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="video">
            <video
              v-if="videoUrl"
              :src="videoUrl"
              class="wp-100"
              controls
              muted
              autoplay
            ></video>
          </div>
          <div class="announcement wp-100">
            <div class="tit">{{ t('index.m1_10') }}</div>
            <div class="con noscrollbar">
              <el-timeline>
                <el-timeline-item
                  hide-timestamp
                  color="#CA2A02"
                  v-for="item in noticesList"
                  :key="item.id"
                >
                  <div
                    class="text"
                    :title="item.title"
                    @click="noticesClick(item)"
                  >
                    {{ item.title }}
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
          <div class="flexec wp-100">
            <div
              class="g-more"
              @click="openUrl('/blog', { id: '-1' })"
            >
              {{ t('seeAll') }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="g-con mt-2">
      <div class="g-ad">
        <a
          :href="getAd('1', 'href')"
          target="_blank"
        >
          <img
            :src="getAd('1', 'image')"
            alt=""
          />
        </a>
      </div>
    </div>

    <!-- 最新资讯 -->
    <div class="module-2 wp-100 mt-5">
      <div class="g-con g-grid">
        <div class="left">
          <div class="g-title">
            <div class="text">{{ t('index.m2_1') }}</div>
            <div class="flexec">
              <div
                class="g-more"
                @click="openUrl('/news')"
              >
                {{ t('more') }}
              </div>
            </div>
          </div>
          <div class="g-list mt-3">
            <div
              class="item flexsc-col"
              v-for="item in newsList"
              :key="item.id"
              @click="openUrl(`/detail`, { id: item.id })"
            >
              <img
                :src="item.newsImage"
                alt=""
              />
              <div class="info t">
                <div
                  class="tit line-2"
                  :title="item.newTitle"
                >
                  {{ item.newTitle }}
                </div>
                <div class="time">{{ dateFormat(item.createTime, 3) }}</div>
                <p class="noscrollbar line-4">{{ toText(item.newContent, 120) }}</p>
                <div class="g-more-2"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div
            class="item wp-100"
            v-for="item in indexData"
            :key="item.id"
            @click="openUrl('/indice')"
          >
            <div class="a flexcc">{{ item.indexName }}</div>
            <!-- <div class="b flexcc">({{ dateFormat(item.updateTime, 3) }})</div> -->
            <div :class="['c', 'flexcc', item.changeValue > 0 ? 'red' : 'green']">
              <div class="mr-1">{{ item.indexValue }}</div>
              <img
                v-if="item.changeValue > 0"
                src="@/assets/img/icon_shangzhang.png"
              />
              <img
                v-else
                src="@/assets/img/icon_xiajiang.png"
              />
            </div>
            <div :class="['d', 'flexcc', item.changeValue > 0 ? 'red' : 'green']">
              <span class="mr-2">{{ item.changeValue }}</span>
              <span>{{ item.riseFall }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="g-con mt-2">
      <div class="g-ad">
        <a
          :href="getAd('2', 'href')"
          target="_blank"
        >
          <img
            :src="getAd('2', 'image')"
            alt=""
          />
        </a>
      </div>
    </div>

    <!-- 技术&脱碳 -->
    <div class="module-3 wp-100 mt-5">
      <div class="g-con g-grid">
        <div class="left">
          <div class="g-title">
            <div class="text">{{ t('header.menu5') }}</div>
            <div class="flexec">
              <div
                class="g-more"
                @click="openUrl('/tech')"
              >
                {{ t('more') }}
              </div>
            </div>
          </div>
          <div class="g-list mt-3">
            <div
              class="item flexsc-col"
              v-for="item in ruleList"
              :key="item"
              @click="openUrl(`/techDetail`, { id: item.id })"
            >
              <img :src="item.ruleImage" />
              <div class="info">
                <div
                  class="tit line-2"
                  :title="item.ruleTitle"
                >
                  {{ item.ruleTitle }}
                </div>
                <p class="noscrollbar line-4">{{ toText(item.ruleContent, 200) }}</p>
                <div class="g-more-2"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="right wp-100">
          <div class="ad">
            <a
              :href="getAd('13', 'href')"
              target="_blank"
            >
              <img
                :src="getAd('13', 'image')"
                alt=""
              />
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="g-con mt-2">
      <div class="g-ad">
        <a
          :href="getAd('3', 'href')"
          target="_blank"
        >
          <img
            :src="getAd('3', 'image')"
            alt=""
          />
        </a>
      </div>
    </div>

    <!-- 社区论坛 -->
    <div class="module-4 wp-100 mt-5">
      <div class="g-con g-grid">
        <div class="left">
          <div class="g-title">
            <div class="text">{{ t('index.m4_1') }}</div>
            <div class="flexec">
              <div
                class="g-more"
                @click="openUrl('/blog')"
              >
                {{ t('GoToForum') }}
              </div>
            </div>
          </div>
          <div class="list mt-3">
            <div
              class="item"
              v-for="item in communityListLeft"
              :key="item.id"
            >
              <div class="info">
                <div
                  class="user"
                  @click="openUrl(`/member`, { id: item.customerId })"
                >
                  <div class="avatar">
                    <img :src="item.avatar" />
                  </div>
                  <div class="">
                    <div class="a">
                      {{ item.customerName }}
                    </div>
                    <div class="b mt-1">{{ item.label }}</div>
                  </div>
                </div>
                <div class="clearfix">
                  <div
                    class="tit fl"
                    @click="openUrl(`/blogDetail`, { id: item.id })"
                  >
                    {{ item.articleTitle }}
                  </div>
                  <div class="time fr">
                    {{ dateFormat(item.createTime) }}
                  </div>
                </div>
                <!-- <div class="text noscrollbar">
                  {{ item.isShowMore ? item.articleText : toText(item.articleText, 150) }}
                  <span
                    v-if="item.articleText.length > 150"
                    class="show-more"
                    @click="item.isShowMore = !item.isShowMore"
                  >
                    {{ item.isShowMore ? t('blog.b2') : t('blog.b1') }}
                  </span>
                </div> -->
                <div class="imglist flexsc">
                  <el-image
                    v-for="(url, index) in item.imgList"
                    :src="url"
                    :preview-src-list="item.imgListAll"
                    :initial-index="index"
                    fit="cover"
                  />
                  <div
                    class="more flexcc"
                    v-if="item.imgListAll.length > 6"
                  >
                    {{ `+${item.imgListAll.length - 6}` }}
                  </div>
                </div>
                <div class="flexsc">
                  <div
                    :class="['num', 'flexsc', { active: item.isLike > 0 }]"
                    @click="handleLike(item)"
                  >
                    {{ item.likeCount }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right wp-100">
          <div class="hot">
            <div class="tit">{{ t('index.m4_2') }}</div>
            <div class="list">
              <div
                class="item"
                v-for="(item, index) in communityList"
                :key="item.id"
                @click="openUrl(`/blogDetail`, { id: item.id })"
              >
                <div class="num">{{ index + 1 }}</div>
                <div
                  class="text line-2"
                  :title="item.articleTitle"
                >
                  {{ item.articleTitle }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="g-con mt-2">
      <div class="g-ad">
        <a
          :href="getAd('4', 'href')"
          target="_blank"
        >
          <img
            :src="getAd('4', 'image')"
            alt=""
          />
        </a>
      </div>
    </div>

    <!-- 船员 -->
    <div class="module-6 wp-100 mt-5">
      <div class="g-con g-grid">
        <div class="left">
          <div class="g-title">
            <div class="text">{{ t('index.m6_1') }}</div>
            <div class="flexec">
              <div
                class="g-more"
                @click="openUrl('/crew')"
              >
                {{ t('more') }}
              </div>
            </div>
          </div>
          <div class="list mt-3">
            <div
              class="item wp-100"
              v-for="item in crewList"
              :key="item.id"
              @click="openUrl('/crewResume', { id: item.id })"
            >
              <img
                :src="item.headSculpture"
                alt=""
              />
              <div class="info">
                <div class="a">{{ item.crewName }}</div>
                <!-- <div class="b">3 years of experience/be on the job</div> -->
                <div class="c">{{ item.crewLocation }}</div>
                <div class="experience">{{ getDictLabel('duties', item.duties) }}</div>
                <div class="d flexcc">{{ getDictLabel('resume_work_status', item.crewStatus) }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right wp-100">
          <div class="con g-ad">
            <a
              :href="getAd('14', 'href')"
              target="_blank"
            >
              <img :src="getAd('14', 'image')" />
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="g-con mt-2">
      <div class="g-ad">
        <a
          :href="getAd('5', 'href')"
          target="_blank"
        >
          <img
            :src="getAd('5', 'image')"
            alt=""
          />
        </a>
      </div>
    </div>

    <!-- 加入我们 -->
    <div class="module-5 wp-100 mt-5">
      <div class="g-con">
        <div class="g-title">
          <div class="text">{{ t('index.m7_1') }}</div>
        </div>

        <div class="num mt-3">
          <div class="item flexcc-col">
            <div class="a">{{ partnersObj?.partnersNum }}</div>
            <div>{{ t('index.m7_2') }}</div>
          </div>
          <div class="item flexcc-col">
            <div class="a">{{ partnersObj?.customerNum }}</div>
            <div>{{ t('index.m7_3') }}</div>
          </div>
          <div class="item flexcc-col">
            <div class="a">{{ partnersObj?.enterpriseNum }}</div>
            <div>{{ t('index.m7_4') }}</div>
          </div>
        </div>

        <div class="con mt-3">
          <div class="item">
            <img
              src="@/assets/img/pic_09.png"
              alt=""
            />
            <div class="info">
              <div class="tit">{{ t('index.m7_a1') }}</div>
              <div>
                <div class="li">{{ t('index.m7_a2') }}</div>
                <div class="li">{{ t('index.m7_a3') }}</div>
                <div class="li">{{ t('index.m7_a4') }}</div>
              </div>
              <el-button
                type="primary"
                class="btn"
                @click="openUrl('/register')"
              >
                {{ t('index.m7_btn') }}
              </el-button>
            </div>
          </div>
          <div class="item">
            <img
              src="@/assets/img/pic_10.png"
              alt=""
            />
            <div class="info">
              <div class="tit">{{ t('index.m7_b1') }}</div>
              <div>
                <div class="li">{{ t('index.m7_b2') }}</div>
                <div class="li">{{ t('index.m7_b3') }}</div>
                <div class="li">{{ t('index.m7_b4') }}</div>
              </div>
              <el-button
                type="primary"
                class="btn"
                @click="openUrl('/register')"
              >
                {{ t('index.m7_btn') }}
              </el-button>
            </div>
          </div>
          <div class="item">
            <img
              src="@/assets/img/pic_11.png"
              alt=""
            />
            <div class="info">
              <div class="tit">{{ t('index.m7_c1') }}</div>
              <div>
                <div class="li">{{ t('index.m7_c2') }}</div>
                <div class="li">{{ t('index.m7_c3') }}</div>
                <div class="li">{{ t('index.m7_c4') }}</div>
              </div>
              <el-button
                type="primary"
                class="btn"
                @click="openUrl('/register')"
              >
                {{ t('index.m7_btn') }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 公告详情 -->
  <NoticeDetail
    v-if="noticeDialogVisible"
    :visible="noticeDialogVisible"
    :item="noticesActive"
    @close="noticeDialogVisible = false"
  />

  <!-- 移动端 -->
  <div
    class="mobile"
    v-if="$isMobile"
  >
    <Banner bannerModel="0" />
    <div class="video">
      <video
        v-if="videoUrl"
        :src="videoUrl"
        class="wp-100"
        controls
        muted
        autoplay
        loop
        webkit-playsinline
        playsinline
        x5-video-player-type="h5-page"
      ></video>
    </div>

    <!-- 最新资讯 -->
    <div class="module-2-m wp-100 mt-3">
      <div class="g-con-m">
        <div class="g-title-m">
          <div class="text">{{ t('index.m2_1') }}</div>
          <div class="flexec">
            <div
              class="g-more"
              @click="openUrl('/news')"
            >
              {{ t('more') }}
            </div>
          </div>
        </div>
        <div class="g-list-m mt-3">
          <div
            class="item"
            v-for="item in newsList"
            :key="item.id"
            @click="openUrl(`/detail`, { id: item.id })"
          >
            <img
              :src="item.newsImage"
              alt=""
            />
            <div class="info">
              <div class="tit line-2">{{ item.newTitle }}</div>
              <div class="time mt-1">{{ dateFormat(item.createTime, 3) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 指数 -->
    <div class="module-3-m wp-100 mt-3">
      <div class="g-con-m">
        <div class="g-title-m">
          <div class="text">{{ t('index.m3_6') }}</div>
        </div>
        <div class="con mt-1">
          <div
            class="item wp-100"
            v-for="item in indexData"
            :key="item.id"
            @click="openUrl('/indice')"
          >
            <div class="a flexcc">{{ item.indexName }}</div>
            <!-- <div class="b flexcc">({{ dateFormat(item.updateTime, 3) }})</div> -->
            <div :class="['c', 'flexcc', item.changeValue > 0 ? 'red' : 'green']">
              <div class="mr-1">{{ item.indexValue }}</div>
              <img
                v-if="item.changeValue > 0"
                src="@/assets/img/icon_shangzhang.png"
              />
              <img
                v-else
                src="@/assets/img/icon_xiajiang.png"
              />
            </div>
            <div :class="['d', 'flexcc', item.changeValue > 0 ? 'red' : 'green']">
              <span class="mr-2">{{ item.changeValue }}</span>
              <span>{{ item.riseFall }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 社区 -->
    <div class="module-4-m wp-100 mt-3">
      <div class="g-con-m">
        <div class="g-title-m">
          <div class="text">{{ t('index.m4_1') }}</div>
        </div>
        <div class="con mt-1">
          <div
            class="item mb-1"
            v-for="item in communityListm"
            :key="item.id"
          >
            <div class="flexsc">
              <div class="a">
                <img
                  :src="item.avatar"
                  alt=""
                />
              </div>
              <div class="">
                <div>{{ item.customerName }}</div>
                <div>{{ item.label }}</div>
              </div>
            </div>
            <div class="">
              <div class="tit">{{ item.articleTitle }}</div>
              <div class="text line-2">{{ toText(item.articleText, 120) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 船员 -->
    <div class="module-6-m wp-100 mt-3">
      <div class="g-con-m">
        <div class="g-title-m">
          <div class="text">{{ t('index.m6_1') }}</div>
        </div>
        <div class="list mt-1">
          <div
            class="item wp-100"
            v-for="item in crewListm"
            :key="item.id"
          >
            <img
              :src="item.headSculpture"
              alt=""
            />
            <div class="info">
              <div class="a">{{ item.crewName }}</div>
              <!-- <div class="b">3 years of experience/be on the job</div> -->
              <div class="c">{{ item.crewLocation }}</div>
              <div class="c">{{ getDictLabel('duties', item.duties) }}</div>
              <div class="d flexcc">{{ getDictLabel('resume_work_status', item.crewStatus) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加入我们 -->
    <div class="module-5-m wp-100 mt-3">
      <div class="g-con-m">
        <div class="g-title-m">
          <div class="text">{{ t('index.m7_1') }}</div>
        </div>
        <div class="con mt-1">
          <div class="item">
            <img
              src="@/assets/img/pic_09.png"
              alt=""
            />
            <div class="info">
              <div class="tit">{{ t('index.m7_a1') }}</div>
              <div>
                <div class="li">{{ t('index.m7_a2') }}</div>
                <div class="li">{{ t('index.m7_a3') }}</div>
                <div class="li">{{ t('index.m7_a4') }}</div>
              </div>
              <el-button
                type="primary"
                class="btn"
                @click="openUrl('/register')"
              >
                {{ t('index.m7_btn') }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, getCurrentInstance, onBeforeMount, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { noticesListApi, getVideoInfoApi, getThreeDayPopularListApi, getCrewListApi, getNewsListApi, getBannerApi, getIndexDataApi } from '@/service/common'
import { articleLike, articleCancelLike } from '@/service/blog'
import { getOrganization } from '@/service/organizationStructure'
import { getListApi } from '@/service/tech'
import { getPartnersStatistics } from '@/service/aboutUs.js'
import { dateFormat, toText, openUrl } from '@/utils'
import NoticeDetail from './NoticeDetail.vue'
import useAd from '@/stores/ad'
import useLogin from '@/stores/login'
import Banner from '@/components/Banner.vue'

import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination } from 'swiper'
import 'swiper/css/pagination'

import useDict from '@/hooks/useDict'
const { dictData, getDictData, getDictLabel } = useDict()

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

// 路由
const router = useRouter()
const route = useRoute()

const storeLogin = useLogin()
const storeAd = useAd()
const { getAd } = storeAd

onBeforeMount(() => {
  init()
})

// i18n
const { t, locale } = useI18n()
watch(locale, (n) => {
  noticeReset()
  init()
})

// 查看企业简历标识
const isViewResume = ref(false)
// 企业信息
const getOrganizationInfoFn = async () => {
  if (!storeLogin?.userInfo?.enterpriseId) return
  await getOrganization(storeLogin.userInfo.enterpriseId).then(({ data }) => {
    isViewResume.value = data.viewResumeFlag === '1'
  })
}

// 视频地址
const videoUrl = ref(null)
const getVideoUrl = () => {
  getVideoInfoApi().then(({ data: { videoPath } }) => {
    videoUrl.value = videoPath
  })
}

// 登录的跳个人中心
const setBannerHref = computed(() => {
  return (href) => (storeLogin?.userInfo?.id ? '#/personalHomepage' : href)
})

//公告
const noticePage = ref({
  pageNum: 1,
  pageSize: 5
})
const total = ref(0)
const noticesList = ref([])
const getNoticesList = () => {
  noticesListApi(noticePage.value).then(({ rows, total: t }) => {
    // if (noticesList.value.length >= t) {
    //   isScrollDisabled.value = true
    //   return
    // }
    noticesList.value = [...noticesList.value, ...rows]
    // total.value = t
    // noticePage.value.pageNum++
  })
}
const isScrollDisabled = ref(false) // 禁止加载
const noticeDialogVisible = ref(false) // 详情弹窗
const noticesActive = ref(null) // 查看的当前公告
const noticesClick = (item) => {
  noticeDialogVisible.value = true
  noticesActive.value = item
}
const noticeReset = () => {
  noticePage.value.pageNum = 1
  noticesList.value = []
  isScrollDisabled.value = false
  getNoticesList()
}

// 新闻
const newsList = ref([])
const getNewsList = () => {
  getNewsListApi({
    pageNum: 1,
    pageSize: 3
  }).then(({ rows }) => {
    newsList.value = rows
  })
}

// 指数
const indexData = ref([])
const getIndexData = () => {
  getIndexDataApi().then(({ data }) => {
    indexData.value = data
  })
}

// 技术规则 数据
const ruleList = ref({})
const getRuleList = () => {
  getListApi({
    pageNum: 1,
    pageSize: 3
  }).then(({ rows }) => {
    ruleList.value = rows
  })
}

// 社区 热门文章
const communityList = ref([])
const communityListLeft = ref([])
const communityListm = ref([])
const getCommunityList = () => {
  getThreeDayPopularListApi({
    pageNum: 1,
    pageSize: 10
  }).then(({ rows }) => {
    communityList.value = rows.slice(0, 10)

    communityListLeft.value = rows.slice(0, 2)
    communityListLeft.value.forEach((item) => {
      item.isShowMore = false
      item.imgList = item.articlePicture?.split(',')?.slice(0, 6)
      item.imgListAll = item.articlePicture?.split(',') || []
    })

    communityListm.value = rows
  })
}
const likeLoading = ref(false)
const handleLike = (item) => {
  if (likeLoading.value) return
  likeLoading.value = true
  const params = {
    objType: 0,
    customerId: storeLogin.userInfo.id,
    objId: item.id
  }
  if (item.isLike > 0) {
    articleCancelLike(params)
      .then(() => {
        item.isLike = 0
        item.likeCount--
      })
      .finally(() => {
        likeLoading.value = false
      })
  } else {
    articleLike(params)
      .then(() => {
        item.isLike = 1
        item.likeCount++
      })
      .finally(() => {
        likeLoading.value = false
      })
  }
}

// 优秀船员
const crewList = ref([])
const crewListm = ref([])
const getCrewList = () => {
  getCrewListApi({
    pageNum: 1,
    pageSize: 3
  }).then(({ rows }) => {
    rows.forEach((item) => {
      if (!isViewResume.value) {
        item.crewName = `*${item.crewName.substr(1)}`
      }
    })
    crewList.value = rows
    crewListm.value = rows.slice(0, 2)
  })
}

// banner
const bannerData = ref([])
const bannerData_m = ref([new URL('@/assets/img/pic_01m.png', import.meta.url)])
const myswiper = ref(null)
const onSwiper = (swiper) => {
  myswiper.value = swiper
}
const onSlideChange = () => {}
const modules = [Autoplay]
const getBanner = () => {
  getBannerApi({
    bannerModel: 0
  }).then(({ data }) => {
    const urlArr = data.bannerHref.split(',')
    bannerData.value = data.bannerImage.split(',').map((item, index) => {
      return {
        url: item,
        href: urlArr[index] || 'javascript:void(0)'
      }
    })
  })
}

// 加入我们 数据
const partnersObj = ref({})
const getPartnersStatisticsFn = () => {
  getPartnersStatistics().then((res) => {
    partnersObj.value = res.data
  })
}

// init
const init = async () => {
  getDictData('duties')
  getDictData('resume_work_status')
  getBanner()
  getVideoUrl()
  getNoticesList()
  getNewsList()
  getRuleList()
  getCommunityList()
  await getOrganizationInfoFn()
  getCrewList()
  getIndexData()
  getPartnersStatisticsFn()
}
</script>

<style scoped lang="scss">
.g-grid {
  display: grid;
  grid-template-columns: 949px 290px;
  gap: 21px;
}

.module {
  margin-top: 35px;

  .left {
    .service {
      height: 64px;
      background: #252628;
      color: #fff;
      padding: 0 25px;
      text-transform: uppercase;
      font-weight: bold;
    }

    .text {
      color: #fff;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.5;
    }

    .a {
      width: 100%;
      height: 360px;
      position: relative;
      background: #212121;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .btn {
        width: 220px;
      }

      .text {
        margin-top: 20px;
      }
    }

    .b {
      width: 466px;
      height: 182px;
      background: #212121;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .text {
        height: calc(182px - 64px);
      }
    }

    .c {
      width: 466px;
      height: 182px;
      background: #212121;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .text {
        height: calc(182px - 64px);
      }
    }
  }

  .right {
    position: relative;
    display: grid;
    grid-template-rows: 250px 233px;
    gap: 30px;

    &::before {
      content: '';
      display: block;
      position: absolute;
      height: 100%;
      width: 1px;
      background: #eaebec;
      left: -11px;
      top: 0;
    }

    .video {
      height: 250px;

      video {
        background: #252628;
        height: 100%;
      }
    }

    .announcement {
      padding-top: 20px;
      border-top: 6px solid #252628;
      display: grid;
      grid-template-rows: 16px auto;
      gap: 20px;

      .tit {
        font-weight: bold;
      }

      .con {
        overflow: auto;
        height: 100%;

        .text {
          font-size: 12px;
          color: #6a6973;
          cursor: pointer;
        }

        :deep(.el-timeline-item__wrapper) {
          top: 0;
        }
      }

      :deep(.el-timeline-item__node--normal) {
        width: 6px;
        height: 6px;
        left: 2px;
        top: 3px;
      }
    }
  }
}

.g-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;

  .item {
    position: relative;
    cursor: pointer;

    &:not(:first-of-type)::before {
      content: '';
      display: block;
      position: absolute;
      height: 100%;
      width: 1px;
      background: #eaebec;
      left: -10px;
      top: 0;
    }

    img {
      width: 100%;
      height: 170px;
    }

    .info {
      padding: 20px 10px 0;
      position: relative;
      display: grid;
      grid-template-rows: 40px 67px 50px;
      gap: 20px;

      &.t {
        grid-template-rows: 40px 15px 67px 50px;
      }

      .tit {
        font-size: 16px;
        font-weight: bold;
      }

      .time {
        font-size: 12px;
      }

      p {
        line-height: 1.4;
        font-size: 12px;
        word-break: break-all;
      }
    }
  }
}

.module-2 {
  .left {
  }

  .right {
    display: grid;
    grid-template-rows: repeat(4, 106px);
    gap: 10px;
    align-content: space-between;

    .item {
      background: #212121;
      color: #fff;
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      gap: 5px;
      padding: 10px;
      cursor: pointer;

      .a {
        font-weight: bold;
        font-size: 12px;
      }

      .b {
        color: #a0a0a0;
        font-size: 12px;
      }

      .c {
        div {
          font-size: 20px;
        }
      }

      .d {
        span {
          font-size: 12px;
        }
      }

      .red {
        color: #ca2a02;
      }

      .green {
        color: #03c56c;
      }
    }
  }
}

.module-3 {
  .left {
  }

  .right {
    .ad {
      width: 100%;
      height: 100%;
      background: #252628;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.module-4 {
  .left {
    .list {
      display: grid;
      // grid-template-rows: repeat(2, 250px);
      gap: 20px;

      .item {
        background: #f5f5f5;
        padding: 30px 23px;
        padding-left: 72px;
        display: grid;

        // grid-template-columns: 250px auto;
        // grid-template-rows: 190px;
        // gap: 38px;
        // > img {
        //   width: 100%;
        //   height: 190px;
        // }
        .info {
          display: grid;
          gap: 18px;

          .user {
            display: grid;
            grid-template-columns: 40px auto;
            gap: 8px;
            margin-left: -48px;

            .avatar {
              img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #fff;
              }
            }

            .a {
              font-weight: bold;
              font-size: 16px;
            }

            .b {
              color: #9d9fa5;
              font-size: 12px;
            }
          }

          .time {
            font-size: 12px;
          }

          .imglist {
            .el-image {
              width: 100px;
              height: 100px;
              background: #eaebec;
              margin-right: 14px;
            }

            .more {
              width: 100px;
              height: 100px;
              background: rgba(0, 0, 0, 0.3);
              margin-left: -114px;
              position: relative;
              z-index: 9;
              color: #fff;
              font-size: 28px;
              pointer-events: none;
            }
          }

          .tit {
            // font-weight: bold;
            font-size: 18px;
            cursor: pointer;
          }

          .text {
            line-height: 1.5;
            // font-size: 16px;
            color: #6a6973;
            white-space: pre-line;

            .show-more {
              color: #000;
              cursor: pointer;
            }
          }

          .num {
            height: 20px;
            color: #9d9fa5;
            padding-left: 25px;
            background: url('@/assets/img/icon_dianzan_nor.png') no-repeat 0 center / 20px;
            cursor: pointer;

            &.active {
              color: #ca2a02;
              background-image: url('@/assets/img/icon_dianzan_pre.png');
            }
          }
        }
      }
    }
  }

  .right {
    padding-top: 40px;

    .hot {
      border: 1px solid #eaebec;
      height: 100%;
      padding: 23px;
      box-sizing: border-box;
      display: grid;
      grid-template-rows: 15px auto;
      gap: 30px;

      .tit {
        font-weight: bold;
        color: #252628;
        text-transform: uppercase;
      }

      .list {
        display: grid;
        grid-template-rows: repeat(10, 1fr);
        gap: 15px;

        .item {
          display: grid;
          grid-template-columns: 20px auto;
          gap: 10px;

          .num {
            color: #ca2a02;
            font-weight: bold;
            text-align: right;
          }

          .text {
            color: #6a6973;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.module-5 {
  .num {
    display: grid;
    grid-template-columns: repeat(3, 420px);
    grid-template-rows: 130px;
    background: url('@/assets/img/pic_001.png') no-repeat center / cover;

    .item {
      color: #fff;
      position: relative;

      &:not(:first-of-type)::before {
        content: '';
        display: block;
        position: absolute;
        height: 60px;
        width: 1px;
        background: rgba($color: #fff, $alpha: 0.5);
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
      }

      .a {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
  }

  .con {
    display: grid;
    grid-template-columns: repeat(3, 420px);

    .item {
      display: grid;
      grid-template-rows: repeat(2, 220px);
      position: relative;

      &:nth-of-type(2) {
        img {
          position: absolute;
          bottom: 0;
        }
      }

      img {
        width: 100%;
      }

      .info {
        background: #252628;
        padding: 25px;
        display: grid;
        grid-template-rows: auto 70px auto;
        gap: 15px;

        .tit {
          color: #fff;
          font-weight: bold;
          font-size: 20px;
        }

        .li {
          color: #6a6973;
          line-height: 1.8;

          &::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--mainColor);
            border-radius: 50%;
            margin-right: 5px;
          }
        }

        .btn {
          width: 100%;
          height: 48px;
        }
      }
    }
  }
}

.module-6 {
  .left {
    .list {
      display: grid;
      grid-template-columns: repeat(3, 305px);
      gap: 18px;

      .item {
        position: relative;

        img {
          width: 100%;
          height: 170px;
          object-fit: contain;
          background: #f5f5f5;
        }

        &:not(:first-of-type)::before {
          content: '';
          display: block;
          position: absolute;
          height: 100%;
          width: 1px;
          background: #eaebec;
          left: -10px;
          top: 0;
        }

        .info {
          padding: 22px;
          display: grid;
          grid-template-rows: repeat(4, auto);
          gap: 12px;
          justify-items: center;

          .a {
            font-weight: bold;
            font-size: 18px;
          }

          .b {
            color: #01358d;
          }

          .c {
            color: #6a6973;
          }

          .d {
            width: 142px;
            height: 39px;
            background: #ffffff;
            border: 1px solid #ca2a02;
            color: #ca2a02;
          }
          .experience {
            font-size: 14px;
            font-weight: 400;
            color: #01358d;
          }
        }
      }
    }
  }

  .right {
    min-height: 354px;
    // padding-top: 40px;

    .con {
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.mobile {
  .g-list-m {
    display: grid;
    gap: 18px;

    .item {
      position: relative;
      display: grid;
      grid-template-columns: 120px auto;
      gap: 10px;

      img {
        width: 100%;
        height: 80px;
      }

      .info {
        padding: 10px 0 0;

        .tit {
          font-weight: bold;
        }

        .time {
          color: #6a6973;
          font-size: 12px;
        }
      }
    }
  }

  .banner-swiper {
    height: 300px;

    .swiper-slide {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .video {
    height: 200px;

    video {
      height: 100%;
    }
  }

  .module-3-m {
    .con {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;

      .item {
        background: #212121;
        color: #fff;
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        gap: 5px;
        padding: 10px;

        .a {
          font-weight: bold;
          font-size: 12px;
        }

        .b {
          color: #a0a0a0;
          font-size: 12px;
        }

        .c {
          div {
            font-size: 20px;
          }
        }

        .d {
          span {
            font-size: 12px;
          }
        }

        .red {
          color: #ca2a02;
        }

        .green {
          color: #03c56c;
        }
      }
    }
  }

  .module-4-m {
    .con {
      .item {
        display: grid;
        grid-template-rows: 40px auto;
        gap: 20px;
        background: #f5f5f5;
        padding: 10px;

        .a {
          margin-right: 5px;

          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }

        .tit {
          font-weight: bold;
        }
      }
    }
  }

  .module-6-m {
    .list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;

      .item {
        position: relative;

        img {
          width: 100%;
          height: 100px;
          display: block;
          object-fit: contain;
          background: #252628;
        }

        .info {
          padding: 10px;
          display: grid;
          grid-template-rows: repeat(3, auto);
          gap: 12px;
          justify-items: center;
          background: #f5f5f5;

          .a {
            font-weight: bold;
            font-size: 16px;
          }

          .b {
            color: #01358d;
          }

          .c {
            color: #6a6973;
          }

          .d {
            width: 100px;
            height: 25px;
            background: #ffffff;
            border: 1px solid #ca2a02;
            color: #ca2a02;
            font-size: 12px;
          }
        }
      }
    }
  }

  .module-5-m {
    .con {
      // display: grid;
      // grid-template-columns: repeat(3, 420px);
      .item {
        // display: grid;
        // grid-template-rows: repeat(2, 220px);
        position: relative;

        &:nth-of-type(2) {
          img {
            position: absolute;
            bottom: 0;
          }
        }

        img {
          width: 100%;
          display: block;
        }

        .info {
          background: #252628;
          padding: 25px;
          display: grid;
          grid-template-rows: auto 70px auto;
          gap: 15px;

          .tit {
            color: #fff;
            font-weight: bold;
            font-size: 16px;
          }

          .li {
            color: #6a6973;
            line-height: 1.8;

            &::before {
              content: '';
              display: inline-block;
              width: 8px;
              height: 8px;
              background: var(--mainColor);
              border-radius: 50%;
              margin-right: 5px;
            }
          }

          .btn {
            width: 100%;
            height: 48px;
          }
        }
      }
    }
  }
}
</style>
